<template>
	<view class="container">
		<view class="header">
			<uni-nav-bar statusBar="true" @clickLeft="back" color="#fff" leftIcon="back" background="inherit">
				<view class="navTitle">
					<text>线下门店</text>
					<text>STORE CONSUMPTION</text>
				</view>
			</uni-nav-bar>
			<view class="logoBox" @tap="back">
				<image src="https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-07/11d8220200709195639894.png" mode=""></image>
				<view class="title">
					<text>国家普惠社区</text>
					<text>GUOJIAPUHUISHEQU</text>
				</view>
			</view>
		</view>

		<view class="select__body">
			<!-- 定位搜索 -->
			<view class="searchBox">
				<view class="search">
					<view class="location" @tap="getLocation(1)">
						<text class="address">{{Areaaddress}}</text>
						<text class="cell-more yticon icon-xia"></text>
					</view>
					<icon :type="iconType" size="18" />
					<input type="text" disabled="true" @tap="searchTo" placeholder="搜索您喜爱的商户" placeholder-class="search-input-hoder"
					 confirm-type="search" v-model="keyWord" />
				</view>
				<view class="classify" @tap="goCate">
					<image src="/static/images/index/index_cate.png" mode="aspectFit"></image>
				</view>
			</view>
			<!-- 商户分类 -->
			<view class="storeCate">
				<scroll-view class="scroll__view" scroll-x="true" :scroll-left="scrollLeft">
					<view class="list">
						<view @tap="clickCate(-1,'')" class="item">
							<text :class="active === -1?'active':''">推荐</text>
						</view>
						<view @tap="clickCate(index,item.sc_id)" class="item" v-for="(item,index) in homeData.cateList" :key="index">
							<text :class="active == index?'active':''">{{item.sc_name}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 商户列表 -->
			<view class="storeList" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower" @scroll="scrollChange">
					<seller-block :storeList="storeList" :scrollTop="scrollTop"></seller-block>
					<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
				</scroll-view>
			</view>
		</view>
		<category @select="select" @back="cateback" :show="categoryShow"></category>
	</view>
</template>

<script>
	import {
		getHomeData
	} from "@/api/public.js"
	import {
		systemConfig
	} from '@/api/public.js'
	import wechat from '@/common/wechat.js'
	import {
		merchantList
	} from "@/api/merchant.js"
	import sellerBlock from "@/components/sellerBlock/sellerBlock";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		components: {
			uniLoadMore,
			uniNavBar,
			sellerBlock
		},
		data() {
			return {
				scrollLeft: 0,
				touchX: 0,
				categoryShow: false,
				Areaaddress: "定位中",
				longitude: "",
				latitude: "",
				iconType: 'search',
				keyWord: '',
				homeData: {},
				cate_id: "",
				active: -1,
				nodata: false,
				storeList: [],
				page: 1,
				limit: 10,
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				selectCity: false,
				reLocat: false,
				fromSDetail: false, //从分类-搜索详情回来显示 分类
				personal_shell_ration: 1,
				scrollTop: 0
			}
		},
		onShow() {
			let pages = getCurrentPages();
			let currPage = pages[pages.length - 1];
			if (currPage.reLocat) { //重新定位
				this.getLocation();
				return
			}
			if (currPage.selectCity) {
				uni.removeStorageSync('selectCity')
				this.Areaaddress = currPage.Areaaddress
				this.handleSelectCity(currPage.Areaaddress)
			}
			if (currPage.fromSDetail) {
				this.categoryShow = true;
			}
		},
		onShareAppMessage() { //分享
			if (!uni.getStorageSync("Authori-zation")) {
				return {
					title: uni.getStorageSync("share")[1].title,
					path: '/pages/index/offline',
					imageUrl: uni.getStorageSync("share")[1].url
				}
			} else {
				return {
					title: uni.getStorageSync("share")[1].title,
					path: '/pages/index/offline?uid=' + uni.getStorageSync("userInfo").uid + "&uk=1",
					imageUrl: uni.getStorageSync("share")[1].url
				}
			}
		},
		onLoad(option) {
			if (option.from == "index") {
				this.active = -1
				// this.cate_id = 3
			} else if (option.active) {
				this.active = option.active
			}
			if (uni.getStorageSync('Areaaddress')) {
				this.getHomeData()
				this.Areaaddress = uni.getStorageSync('Areaaddress')
			} else {
				this.getLocation()
			}

			systemConfig({
				filed: 'personal_shell_ration'
			}).then(res => {
				this.personal_shell_ration = Number(res.msg) / 100;
			})
			// #ifdef H5
			if (!uni.getStorageSync("Authori-zation")) {
				wechat.share(uni.getStorageSync("share")[1].title, "", window.location.href, uni.getStorageSync("share")[1].url)
			} else {
				wechat.share(uni.getStorageSync("share")[2].title, "", window.location.href + '?uid=' + uni.getStorageSync(
					"userInfo").uid + "&uk=1", uni.getStorageSync("share")[2].url)
			}
			// #endif
		},
		methods: {
			touchstart(e) {
				this.touchX = e.changedTouches[0].clientX
			},
			touchmove(e) {},
			touchend(e) {
				let _this = this
				if (this.touchX - e.changedTouches[0].clientX >= 150) {

					if (this.active == this.homeData.cateList.length - 1) {
						return
					}
					this.active = this.active + 1
					if (this.active > 2) {
						this.scrollLeft = this.scrollLeft + 60
					}
					this.homeData.cateList.forEach((item, index) => {
						if (index == _this.active) {
							_this.cate_id = item.sc_id
						}
					})
					this.page = 1
					this.loadStatus = "loading"
					this.storeList = []
					this.merchantList()

				} else if (e.changedTouches[0].clientX - this.touchX >= 150) {
					if (this.active == -1) {
						return
					}
					this.active = this.active - 1
					if (this.active < this.homeData.cateList.length - 2) {
						if (0 >= this.scrollLeft) {} else {
							this.scrollLeft = this.scrollLeft - 60
						}
					}
					if (_this.active == -1) {
						_this.cate_id = ""
					} else {
						this.homeData.cateList.forEach((item, index) => {
							if (index == _this.active) {
								_this.cate_id = item.sc_id
							}
						})
					}
					this.page = 1
					this.loadStatus = "loading"
					this.storeList = []
					this.merchantList()
				}
			},
			scrollChange(e) {
				// console.log(e)
				this.scrollTop = e.detail.scrollTop
				// console.log(this.scrollTop)
			},
			lower() {
				if (this.loadStatus == "more")
					(this.loadStatus = "loading"), this.merchantList();
			},
			back() {
				uni.navigateBack({

				})
			},
			searchTo() {
				uni.navigateTo({
					url: `/pages/index/search`
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleSelectCity(city) {
				uni.request({
					url: 'https://apis.map.qq.com/ws/geocoder/v1',
					data: {
						address: city,
						// region: "",
						key: "7YDBZ-PZSWP-7UCDU-LMHBU-QSTXQ-W2FEO",
						output: 'json',
					},
					success: (res) => {
						this.longitude = res.data.result.location.lng;
						this.latitude = res.data.result.location.lat;
						uni.setStorageSync('Areaaddress', this.Areaaddress)
						uni.setStorageSync('longitude', this.longitude)
						uni.setStorageSync('latitude', this.latitude)
						this.getHomeData()
						this.clickCate(this.active, this.cate_id)
					}
				})
			},
			getLocation(link) {
				if (link) {
					return uni.navigateTo({
						url: `/pages/index/selectCity?currentCity=${this.Areaaddress}`,
					})

				}
				let _this = this
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						//#endif
						uni.getLocation({
							type: 'gcj02',
							// #ifdef APP-PLUS
							geocode: true,
							// #endif
							success: function(res) {
								// #ifdef MP-WEIXIN
								uni.request({
									header: {
										"Content-Type": "application/text"
									},
									url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + res.latitude + ',' + res.longitude +
										'&key=7YDBZ-PZSWP-7UCDU-LMHBU-QSTXQ-W2FEO',
									success(re) {
										_this.Areaaddress = re.data.result.address_component.city;
										_this.longitude = re.data.result.location.lng;
										_this.latitude = re.data.result.location.lat;
										// #endif
										// #ifdef APP-PLUS
										_this.Areaaddress = res.address.city;
										_this.longitude = res.longitude
										_this.latitude = res.latitude
										// #endif
										uni.setStorageSync('Areaaddress', _this.Areaaddress)
										uni.setStorageSync('longitude', _this.longitude)
										uni.setStorageSync('latitude', _this.latitude)
										_this.getHomeData()
										_this.clickCate(_this.active, _this.cate_id)
										// #ifdef MP-WEIXIN
									}
								})
								//#endif
							},
							cancel: function(res) {
								_this.Areaaddress = "重新定位"
							},
							fail: function(res) {
								_this.Areaaddress = "重新定位"
							}
						});
						// #ifdef MP-WEIXIN
					},
					fail() {
						uni.showModal({
							content: "检测到您没打开此小程序的定位权限，是否去设置打开？",
							confirmColor: "#57BE6A",
							success: function(res) {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {}
									})
								} else if (res.cancel) {
									_this.Areaaddress = "重新定位"
									_this.getHomeData()
								}
							}
						})
					}
				})
				// #endif
			},
			getHomeData() {
				getHomeData({
					region: this.Areaaddress,
					position: 51334
				}).then(res => {
					this.homeData = res.data
					if (this.active == -1) {
						this.clickCate(this.active, this.cate_id)
					} else {
						this.clickCate(this.active, res.data.cateList[this.active].sc_id)
					}

				})
			},
			clickCate(idx, id) {
				this.page = 1
				this.loadStatus = "loading"
				this.storeList = []
				this.active = idx
				this.cate_id = id
				this.merchantList(id)
			},
			merchantList(id) {
				merchantList({
					region: this.cate_id == 2 ? uni.getStorageSync('locatAddress') : uni.getStorageSync('Areaaddress'),
					cate_id: this.cate_id,
					longitude: this.cate_id == 2 ? uni.getStorageSync('locatLongitude') : uni.getStorageSync('longitude'),
					latitude: this.cate_id == 2 ? uni.getStorageSync('locatLatitude') : uni.getStorageSync('latitude'),
					page: this.page,
					limit: this.limit,
				}).then(res => {
					this.loadStatus = "more";
					let list = res.data.data.map((val, key) => {
						if (val.rebate_proportion) {
							val.rebate_proportion = ((100 - Number(val.rebate_proportion)) * this.personal_shell_ration).toFixed(2)
						}
						val.quality = val.quality.toFixed(1)
						return val
					})
					this.storeList.push.apply(this.storeList, list);
					if (list.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.storeList.length == 0) {
						this.nodata = true
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.nodata = false
					}
				})
			},
			goCate() {
				this.categoryShow = true
			},
			select(e) {
				uni.navigateTo({
					url: `/pages/index/searchDetail?id=${e.id}`
				})
			},
			cateback(e) {
				this.categoryShow = e
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.container {
		.header {
			background: url(https://inclusivecommunity.oss-cn-chengdu.aliyuncs.com/attach/2020-08/c9702202008211139232703.png) no-repeat;
			background-size: 100% 420rpx;
			position: relative;
			height: 304rpx;
			box-sizing: border-box;

			.navTitle {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				line-height: 30rpx;

				text:nth-of-type(1) {
					font-size: 32rpx;
					letter-spacing: 3rpx;
				}

				text:nth-of-type(2) {
					letter-spacing: 2rpx;
					margin-top: 6rpx;
					font-size: 16rpx;
					font-weight: bold;
				}
			}

			.logoBox {
				position: absolute;
				right: 20rpx;
				bottom: 50rpx;
				height: 35px;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					display: block;
					width: 46rpx;
					height: 48rpx;
				}

				.title {
					margin: 0 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					color: #fff;

					text:nth-of-type(1) {
						font-size: 11px;
						letter-spacing: 1px;
					}

					text:nth-of-type(2) {
						letter-spacing: 1.1px;
						margin-top: 3rpx;
						font-size: 5px;
						font-weight: bold;
					}
				}
			}
		}

		.select__body {
			padding-top: 20rpx;
			position: relative;
			z-index: 1;
			background-color: #f6f6f6;
			margin-top: -40rpx;
			border-radius: 40rpx 40rpx 0 0;
			overflow: hidden;
			box-sizing: border-box;
			height: calc(100vh - 264rpx);

			.searchBox {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				height: 100rpx;
				align-items: center;
				z-index: 60;

				.search {
					width: 600rpx;
					position: relative;

					.location {
						position: absolute;
						left: 0rpx;
						top: 21rpx;
						font-size: 28rpx;
						color: #333;
						line-height: 28rpx;
						height: 28rpx;
						border-right: 1rpx solid #ddd;
						padding-right: 10rpx;
						padding-left: 30rpx;

						.address {
							display: inline-block;
							width: 110rpx;
							height: 28rpx;
							line-height: 28rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.cell-more {
							font-size: 24rpx !important;
						}
					}

					icon {
						position: absolute;
						top: 17rpx;
						left: 195rpx;
					}

					input {
						padding-left: 250rpx;
						height: 70rpx;
						border-radius: 35rpx;
						background-color: #fff;
					}

					.search-input-hoder {
						color: rgba(153, 153, 153, 1);
						font-size: 28rpx;
					}
				}

				.classify {
					position: relative;
					z-index: 15;

					image {
						padding-right: 20rpx;
						width: 37rpx;
						height: 37rpx;
						// background-color: $theme-color;
						vertical-align: middle;
					}
				}
			}

			.storeCate {
				position: relative;
				z-index: 66;
				padding: 0 30rpx;
				line-height: 100rpx;
				display: flex;
				justify-content: space-between;

				.scroll__view {
					width: 100%;
				}

				.list {
					display: flex;

					.item {
						padding: 0 30rpx;
						white-space: nowrap;
						font-size: 30rpx;

						.active {
							color: $theme-color;
							position: relative;
						}

						.active:after {
							content: '';
							position: absolute;
							height: 6rpx;
							width: 20rpx;
							border-radius: 3rpx;
							background-color: $theme-color;
							bottom: -10rpx;
							left: 50%;
							margin-left: -10rpx;
						}
					}

					.item:nth-of-type(1) {
						padding-left: 0;
					}
				}
			}

			.storeList {
				width: 100%;
				box-sizing: border-box;
				position: absolute;
				top: 220rpx;
				bottom: 0;

				.scroll-Y {
					height: 100%;
				}
			}
		}
	}
</style>
